/* * @Author: Yejing * @Date: 2023-06-10 10:31:21 * @LastEditors: Yejing * @LastEditTime: 2023-06-10 10:31:21 *
@Description: desc */
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="$t('storeManagement.storeTraffic')" :navType="search.navType" :bottomBorder="false"
				:navPlaceholder="search.navPlaceholder" :navThmen="search.navThmen" @backEvent='backEvent'
				@focusEvent="focusEvent" @switchSvgEvent="switchSvgEvent">
				<view class="more-box" slot="rightIcon" 
					@click="$u.route('pages/storyType/storeManagement/trafficDetails')">
					<view class="more-block">
						<u-icon name="order" color="#2d2d2d" size="40"></u-icon>
					</view>
				</view>
			</c-navigation-bar>
			<view class="setting">
				<view class="surplus">
					{{$t('storeManagement.currentRemaining')}}：
					<text style="color: #000">{{ surplus }}M</text>
				</view>
				<view class="settingAside1 settingAside">
					<view class="">{{consume1}}MB/2{{$t('storeManagement.hour')}}</view>
					<view class="functionBtn" @click="useDataPackage(1)">{{$t('storeManagement.HomeRecommendation')}}</view>
				</view>
				<view class="settingAside2 settingAside">
					<view class="">{{consume3}}MB/2{{$t('storeManagement.hour')}}</view>
					<view class="functionBtn" @click="useDataPackage(3)">{{$t('storeManagement.SearchRecommendation')}}</view>
				</view>
				<view class="settingAside3 settingAside">
					<view class="">{{consume2}}MB/2{{$t('storeManagement.hour')}}</view>
					<view class="functionBtn" @click="useDataPackage(2)">{{$t('storeManagement.ClassifiedRecommendation')}}</view>
				</view>
				<view class="useClass">
					<view class="useBox useBox1">
						<view class="">{{consume4}}{{$t('storeManagement.times')}} {{$t('storeManagement.In-station')}}</view>
						<view class="functionBtn" @click="useDataPackage(4)">{{$t('storeManagement.UseOnce')}}</view>
					</view>
					<view class="useBox useBox2">
						<view class="">{{consume5}}{{$t('storeManagement.times')}} {{$t('storeManagement.outside')}}</view>
						<view class="functionBtn" @click="useDataPackage(5)">{{$t('storeManagement.UseOnce')}}</view>
					</view>
					<view class="useBox useBox3">
						<view class="">{{consume6}}{{$t('storeManagement.times')}} {{$t('storeManagement.overseas')}}</view>
						<view class="functionBtn" @click="useDataPackage(6)">{{$t('storeManagement.UseOnce')}}</view>
					</view>
				</view>
				<view class="settingAside" style="color: #000; justify-content: center; margin-bottom: 60rpx; height: 120rpx"
					@click="toPage()">{{$t('storeManagement.TrafficPacketPurchase')}}</view>
				<view class="">
					<u-parse :html="content"></u-parse>
				</view>
			</view>
		</c-layout>


	</view>
</template>

<script>
	export default {
		data() {
			return {

				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle'
				},
				surplus: 100,
				consume1: '',
				consume2: '',
				consume3: '',
				consume4: '',
				consume5: '',
				consume6: '',
				content: this.$t('storeManagement.Traffic')
			};
		},
		onLoad() {

		},

		methods: {
			backEvent() {
				uni.navigateTo({
					url: '/pages/storyType/storeManagement',
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/storyType/storeManagement/purchaseTraffic',
					animationType: 'slide-in-right',
					animationDuration: 300
				});

			},
			storeTrafficSurplus() {
				this.$u.get(`/app/shop/storeTrafficSurplus/${uni.getStorageSync('vuexShopId')}`).then((res) => {
					this.consume4 = res.data.deliveryHomepage
					this.consume5 = res.data.offStationPlatform
					this.consume6 = res.data.overseasPromotion
					this.surplus = res.data.residue
				});
			},
			useDataPackage(id) {
				this.$u.post(`/app/shop/useDataPackage`, {
					shopId: uni.getStorageSync('vuexShopId'),
					packageEffectId: id
				}).then((res) => {
					this.$u.toast(res.msg)
					this.storeTrafficSurplus()
				});
			},


		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$u.get('/app/shop/packetEffectList').then((res) => {
				this.consume1 = res.data.find(x => x.id == 1).consume
				this.consume2 = res.data.find(x => x.id == 2).consume
				this.consume3 = res.data.find(x => x.id == 3).consume

				console.log(this.consume1)
			});
			this.storeTrafficSurplus()
		}
	};
</script>

<style lang="scss" scoped>
	.modify-page {
		height: 100vh;

		.setting {
			padding: 40rpx;
		}

		.surplus {
			color: #91909a;
			justify-content: center;
			margin: 0 auto 50rpx;
			width: 434rpx;
			height: 108rpx;
			border-radius: 32rpx;
			background: #ffffff;
			border: 2rpx solid #e1e8e8;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.settingAside {
			height: 152rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #e1e8e8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 26rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 30rpx;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.settingAside1 {
			background-image: url('@/static/images/storeTraffic.png');
		}

		.settingAside2 {
			background-image: url('@/static/images/storeTraffic1.png');
		}

		.settingAside3 {
			background-image: url('@/static/images/storeTraffic3.png');
		}

		.functionBtn {
			border-bottom: 1px solid #fff;
			padding-bottom: 4rpx;
			font-size: 14px;
		}

		.useClass {
			display: flex;
			justify-content: space-between;
			height: 132rpx;
			margin: 10rpx 0 60rpx 0;

			.useBox {
				width: 31%;
				border-radius: 10px;
				display: flex;
				color: #fff;
				flex-wrap: wrap;
				font-size: 24rpx;
				justify-content: center;
				align-content: space-around;
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			}

			.useBox1 {
				background-image: url('@/static/images/storeTraffic5.png');
			}

			.useBox2 {
				background-image: url('@/static/images/storeTraffic6.png');
			}

			.useBox3 {
				background-image: url('@/static/images/storeTraffic4.png');
			}
		}
	}
</style>